<template>
	<view class="info">
<!-- 		<view>
			 <web-view   src="https://apip.weatherdt.com/v2/h5.html?bg=1&md=02345&lc=auto&key=YB1yBcVJ4q" style="height: 400px;"></web-view>
		</view> -->
		
		<swiper autoplay="true" circular="true" indicator-dots="true">
			<swiper-item>
				<image src="../../static/news/2020062220282410528.jpg" style="width: 100%;" mode="widthFix"></image> <!-- https://www.cea.gov.cn/cea/xwzx/365134/5544125/index.html -->
			</swiper-item>
			<swiper-item> 
				<image src="../../static/news/new2.png" style="width: 100%;" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/news/new3.png" style="width: 100%;" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		
		<view class="nav">
			<view class="nav_item animated fadeInLeft" @click="openData()">
				<view class="iconfont icon-data" style="background-color: #DD524D;"></view>
				<text>数据中心网</text>
			</view>
			<view class="nav_item animated fadeInUp" @click="openService()">
				<view class="iconfont icon-fuwu" style="background-color: #795DA3;"></view>
				<text>服务系统网</text>
			</view>
			<view class="nav_item animated fadeInDown" @click="openWarningKnow()">
				<view class="iconfont icon-zhishizhongxin" style="background-color: #4CD964;"></view>
				<text>预警知识</text>
				
			</view>
			<view class="nav_item animated fadeInRight" @click="openWeather()">
				<view class="iconfont icon-tianqi" style="background-color: #007AFF;"></view>
				<text>我的天气</text>
			</view>
		</view>
		
		
		<uni-card
		style="margin: 10px;"
		class="animated fadeInUp"
		@click="openImage('../../static/news/secondera.jpg')"
		mode="style"
		:is-shadow="true"
		thumbnail="../../static/news/secondera.jpg"
		extra="（第二代 1976年）"
		>
       中国地震烈度区划图（第二代 1976年）
	   </uni-card>
	   
	   
	   <!-- 内容通栏 -->
	   <uni-card  
	   class="animated fadeInUp"
	   style="margin: 10px;" :is-shadow="true" title="国际地震中心" thumbnail="../../static/news/dizhen.png" extra="进入官网" @click="openInternationalCenter()">
	       <image src="../../static/news/InternationQuake.png" style="width: 100%;"></image>
	   </uni-card>

	   
	   
		
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	export default {
		data() {
			return {
			
			}
		},
		methods: {
		openImage(res){
			uni.previewImage({
				urls:[res]
			})
		},
		openInternationalCenter(){
			uni.navigateTo({
					url:"../web/web?id=internationalQuakeCenter"
			})
		},
		openWeather(){
			uni.navigateTo({
					url:"../web/web?id=weather"
			})
		},
		openWarningKnow(){
			uni.navigateTo({
					url:'../warningKnow/warningKnow'
			})
		},
		openData(){
			uni.navigateTo({
					url:"../web/web?id=dataCenter"
			})
		},
		openService(){
			uni.navigateTo({
				url:'../web/web?id=serviceSystem'
			})
		}
		}
	}
</script>

<style lang="scss">
	.info swiper{
		width: 750rpx;
		height: 380rpx;
		image{
			height: 380rpx;
			width: 100%;
		}
	}
	.nav{
		display: flex;
		.nav_item{
			width: 25%;
			font-size: 25rpx;
			text-align: center;
			view{
				border-radius: 50%;
				width: 140rpx;
				height: 140rpx;
				margin: 5px auto;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 60rpx;
			}
		}
	}
	
</style>
